/**
 * 右侧工具栏管理器 - 独立面板版本
 * 负责管理右侧垂直Tab按钮和多个独立面板的显示/隐藏、拖拽调整尺寸
 */

export class RightToolbarManager {
    constructor() {

        this.tabsBar = document.getElementById('right-tabs-bar');
        this.tabButtons = document.querySelectorAll('.vertical-tab-btn');
        this.panels = {
            'transform': document.getElementById('transform-panel'),
            'camera': document.getElementById('camera-panel'),
            'model-library': document.getElementById('model-library-panel-content'),
            'material-editor': document.getElementById('material-editor-panel'),
            'texture-library': document.getElementById('texture-library-panel')
        };
        
        // 验证DOM元素
        if (!this.tabsBar) {
            console.error('❌ 未找到 #right-tabs-bar 元素');
        }

        this.currentActivePanel = null; // 当前打开的面板
        this.transformPanel = null; // Transform面板实例引用
        this.materialEditorPanel = null; // 材质编辑器面板实例引用
        this.textureLibraryManager = null; // 贴图库管理器实例引用
        
        // 拖拽调整尺寸相关（每个面板都有）
        this.resizeStates = {};
        
        this.setupEventListeners();
        this.setupResizeForAllPanels();
        this.setupWindowResizeHandler(); // ⭐ 添加窗口resize监听

    }
    
    /**
     * 设置Transform面板实例引用
     */
    setTransformPanel(transformPanel) {
        this.transformPanel = transformPanel;
    }
    
    /**
     * 设置事件监听器
     */
    setupEventListeners() {

        // Tab按钮点击
        this.tabButtons.forEach((btn, index) => {
            const panelName = btn.dataset.panel;

            btn.addEventListener('click', () => {

                this.togglePanel(panelName);
            });
        });
        
        if (this.tabButtons.length === 0) {
            console.warn('⚠️ 未找到Tab按钮！检查HTML中的 .vertical-tab-btn 元素');
        }
    }
    
    /**
     * 为所有面板设置拖拽调整尺寸功能
     */
    setupResizeForAllPanels() {
        Object.keys(this.panels).forEach(panelName => {
            const panel = this.panels[panelName];
            if (!panel) return;
            
            const resizeHandles = {
                left: panel.querySelector('.resize-left'),
                bottom: panel.querySelector('.resize-bottom'),
                corner: panel.querySelector('.resize-corner')
            };
            
            if (!resizeHandles.left || !resizeHandles.bottom || !resizeHandles.corner) {
                console.warn(`面板 ${panelName} 缺少拖拽手柄`);
                return;
            }
            
            this.resizeStates[panelName] = {
                isResizing: false,
                resizeType: null,
                startX: 0,
                startY: 0,
                startWidth: 0,
                startHeight: 0
            };
            
            // 左边缘
            resizeHandles.left.addEventListener('mousedown', (e) => {
                this.startResize(e, panelName, 'left');
            });
            
            // 底部边缘
            resizeHandles.bottom.addEventListener('mousedown', (e) => {
                this.startResize(e, panelName, 'bottom');
            });
            
            // 左下角
            resizeHandles.corner.addEventListener('mousedown', (e) => {
                this.startResize(e, panelName, 'corner');
            });
        });
        
        // 全局鼠标事件
        document.addEventListener('mousemove', (e) => {
            this.doResize(e);
        });
        
        document.addEventListener('mouseup', () => {
            this.stopResize();
        });
    }
    
    /**
     * 开始拖拽调整尺寸
     */
    startResize(e, panelName, type) {
        e.preventDefault();
        e.stopPropagation();
        
        const state = this.resizeStates[panelName];
        const panel = this.panels[panelName];
        
        state.isResizing = true;
        state.resizeType = type;
        state.startX = e.clientX;
        state.startY = e.clientY;
        state.panelName = panelName;
        
        const rect = panel.getBoundingClientRect();
        state.startWidth = rect.width;
        state.startHeight = rect.height;
        
        // 添加拖拽中的样式
        panel.style.transition = 'none';
        document.body.style.cursor = type === 'left' ? 'ew-resize' : 
                                     type === 'bottom' ? 'ns-resize' : 'nesw-resize';
        document.body.style.userSelect = 'none';
    }
    
    /**
     * 执行拖拽调整尺寸
     */
    doResize(e) {
        // 查找当前正在调整大小的面板
        let activeState = null;
        let activePanelName = null;
        
        for (const [panelName, state] of Object.entries(this.resizeStates)) {
            if (state.isResizing) {
                activeState = state;
                activePanelName = panelName;
                break;
            }
        }
        
        if (!activeState) return;
        
        const panel = this.panels[activePanelName];
        const deltaX = activeState.startX - e.clientX;
        const deltaY = e.clientY - activeState.startY;
        
        if (activeState.resizeType === 'left' || activeState.resizeType === 'corner') {
            const newWidth = Math.max(300, Math.min(800, activeState.startWidth + deltaX));
            panel.style.setProperty('width', `${newWidth}px`, 'important');
        }
        
        if (activeState.resizeType === 'bottom' || activeState.resizeType === 'corner') {
            // ⭐ 允许拖拽到几乎全屏，只保留60px边距
            const maxHeight = window.innerHeight - 60;
            const newHeight = Math.max(400, Math.min(maxHeight, activeState.startHeight + deltaY));
            panel.style.setProperty('height', `${newHeight}px`, 'important');
        }
    }
    
    /**
     * 停止拖拽调整尺寸
     */
    stopResize() {
        let wasResizing = false;
        
        for (const [panelName, state] of Object.entries(this.resizeStates)) {
            if (state.isResizing) {
                wasResizing = true;
                state.isResizing = false;
                state.resizeType = null;
                
                const panel = this.panels[panelName];
                panel.style.transition = '';
            }
        }
        
        if (wasResizing) {
            document.body.style.cursor = '';
            document.body.style.userSelect = '';
        }
    }
    
    /**
     * ⭐ 设置窗口resize监听器 - 动态调整面板高度
     */
    setupWindowResizeHandler() {
        let resizeTimeout;
        
        window.addEventListener('resize', () => {
            // 使用防抖避免频繁调整
            clearTimeout(resizeTimeout);
            resizeTimeout = setTimeout(() => {
                this.adjustPanelSizesToWindow();
            }, 100);
        });
        
        // 初始化时也调整一次
        this.adjustPanelSizesToWindow();
    }
    
    /**
     * ⭐ 调整面板尺寸以适应窗口大小
     * 只对材质编辑器面板进行动态调整，其他面板保持原有行为
     */
    adjustPanelSizesToWindow() {
        Object.keys(this.panels).forEach(panelName => {
            const panel = this.panels[panelName];
            if (!panel || !panel.classList.contains('show')) return; // 只调整显示中的面板
            
            // ⭐ 只对材质编辑器面板进行自适应调整
            if (panelName !== 'material-editor') return;
            
            const currentHeight = panel.offsetHeight;
            const maxHeight = window.innerHeight - 60;
            const targetHeight = window.innerHeight - 100; // 目标高度，留100px边距
            
            // ⭐ 窗口缩小：如果当前高度超过最大高度，自动缩小
            if (currentHeight > maxHeight) {
                panel.style.setProperty('height', `${maxHeight}px`, 'important');

            }
            // ⭐ 窗口放大：如果当前高度小于目标高度，自动放大
            else if (currentHeight < targetHeight && targetHeight <= maxHeight) {
                panel.style.setProperty('height', `${targetHeight}px`, 'important');

            }
            
            // 如果面板高度太小（初始化状态），设置默认高度
            if (currentHeight < 400) {
                const defaultHeight = Math.min(targetHeight, maxHeight);
                panel.style.setProperty('height', `${defaultHeight}px`, 'important');

            }
        });
    }
    
    /**
     * 切换面板显示
     */
    async togglePanel(panelName) {

        const panel = this.panels[panelName];
        const tabBtn = this.tabsBar ? this.tabsBar.querySelector(`[data-panel="${panelName}"]`) : null;

        if (!panel) {
            console.warn(`⚠️ 面板 ${panelName} 不存在`);
            return;
        }
        
        // 如果点击的是当前已打开的面板，则关闭它
        if (this.currentActivePanel === panelName) {

            const closed = await this.closePanel(panelName);
            if (!closed) {

            }
            return;
        }
        
        // 关闭当前打开的面板
        if (this.currentActivePanel) {

            const closed = await this.closePanel(this.currentActivePanel);
            if (!closed) {

                return; // 如果无法关闭当前面板，则不打开新面板
            }
        }
        
        // 打开新面板

        await this.openPanel(panelName);
    }
    
    /**
     * 打开指定面板
     */
    async openPanel(panelName) {

        const panel = this.panels[panelName];
        const tabBtn = this.tabsBar ? this.tabsBar.querySelector(`[data-panel="${panelName}"]`) : null;

        if (!panel) {
            console.error(`❌ 面板 ${panelName} 不存在`);
            return;
        }
        
        // ⭐ 确保互斥：移除所有其他面板的显示和高亮
        Object.keys(this.panels).forEach(otherPanelName => {
            if (otherPanelName !== panelName) {
                const otherPanel = this.panels[otherPanelName];
                const otherTabBtn = this.tabsBar ? this.tabsBar.querySelector(`[data-panel="${otherPanelName}"]`) : null;
                
                // 移除显示类
                if (otherPanel) {
                    otherPanel.classList.remove('show');
                }
                
                // 移除高亮类
                if (otherTabBtn) {
                    otherTabBtn.classList.remove('active');
                }
            }
        });
        
        // 如果是Transform面板，检查是否有选中的节点
        if (panelName === 'transform') {
            const nodeNameEl = document.getElementById('transform-node-name');
            const controlsArea = document.getElementById('transform-controls-area');
            
            if (!this.transformPanel || !this.transformPanel.currentNode) {

                // 显示空状态
                // 🔒 如果名称输入框正在编辑模式，不要干扰
                if (nodeNameEl && nodeNameEl.readOnly) {
                    nodeNameEl.value = '未选中节点'; // 修复：input元素使用value而不是textContent
                }
                // 隐藏控件区域
                if (controlsArea) {
                    controlsArea.style.display = 'none';
                }
            } else {
                // 有选中节点，显示控件

                // 🔒 如果名称输入框正在编辑模式，不要覆盖
                if (nodeNameEl && nodeNameEl.readOnly) {
                    nodeNameEl.value = this.transformPanel.currentNode.name; // 修复：input元素使用value而不是textContent
                }
                if (controlsArea) {
                    controlsArea.style.display = 'block';
                }
            }
        }
        
        // 显示面板

        panel.classList.add('show');
        
        if (tabBtn) {

            tabBtn.classList.add('active');
        } else {
            console.warn(`  ⚠️ Tab按钮不存在`);
        }
        
        this.currentActivePanel = panelName;
        
        // ⭐ 面板打开时调整尺寸以适应窗口
        setTimeout(() => {
            this.adjustPanelSizesToWindow();
        }, 50);
        
        // 如果是模型库，初始化模型库
        if (panelName === 'model-library') {

            await this.initializeModelLibrary();
        }
        
        // 如果是材质编辑器，初始化材质编辑器
        if (panelName === 'material-editor') {

            await this.initializeMaterialEditor();
        }
        
        // 如果是贴图库，初始化贴图库
        if (panelName === 'texture-library') {
            await this.initializeTextureLibrary();
        }

        // 如果是相机面板，初始化相机面板
        if (panelName === 'camera') {
            await this.initializeCameraPanel();
            // 更新选中节点
            if (this.cameraPanel && window.sceneTreeManager && window.sceneTreeManager.selectedNode) {
                this.cameraPanel.setNode(window.sceneTreeManager.selectedNode);
            }
        }

    }
    
    /**
     * 关闭指定面板
     */
    async closePanel(panelName) {

        // ⭐ 如果是材质编辑器，检查是否有未保存的修改
        if (panelName === 'material-editor' && this.materialEditorPanel) {
            const canClose = await this.materialEditorPanel.checkUnsavedBeforeClose();
            if (!canClose) {

                return false;
            }
        }
        
        // ⭐ 如果是贴图库面板，清空搜索框并重置列表显示
        if (panelName === 'texture-library') {
            const searchInput = document.getElementById('texture-library-search-input');
            const clearBtn = document.getElementById('texture-library-search-clear');
            if (searchInput) {
                searchInput.value = '';
            }
            if (clearBtn) {
                clearBtn.style.display = 'none';
            }
            // 重置贴图列表显示（取消过滤）
            if (window.textureLibraryManager) {
                window.textureLibraryManager.filterTextures('');
            }
        }
        
        const panel = this.panels[panelName];
        const tabBtn = this.tabsBar ? this.tabsBar.querySelector(`[data-panel="${panelName}"]`) : null;

        if (!panel) {
            console.warn(`  ⚠️ 面板不存在`);
            return false;
        }

        // ⭐ 移除显示类
        panel.classList.remove('show');
        
        // ⭐ 移除高亮类
        if (tabBtn) {

            tabBtn.classList.remove('active');
        }
        
        // ⭐ 清除当前活动面板标记
        if (this.currentActivePanel === panelName) {
            this.currentActivePanel = null;
        }

        return true;
    }
    
    /**
     * 关闭所有面板（用于场景切换等场景）
     * @returns {Promise<boolean>} 如果所有面板都成功关闭则返回true，否则返回false
     */
    async closeAllPanels() {

        // 检查所有面板的状态
        const panelNames = Object.keys(this.panels);

        let openPanelsCount = 0;
        let allClosed = true;
        
        for (const panelName of panelNames) {
            const panel = this.panels[panelName];
            if (!panel) {

                continue;
            }
            
            const hasShowClass = panel.classList.contains('show');
            const displayStyle = window.getComputedStyle(panel).display;
            const visibilityStyle = window.getComputedStyle(panel).visibility;

            // 检查面板是否已打开（通过 .show 类判断）
            if (hasShowClass) {
                openPanelsCount++;

                const closed = await this.closePanel(panelName);
                
                if (!closed) {

                    allClosed = false;
                    break; // 如果有面板无法关闭，停止关闭其他面板
                } else {

                }
            }
        }

        if (allClosed) {

        } else {

        }
        
        return allClosed;
    }
    
    /**
     * 初始化模型库
     */
    async initializeModelLibrary() {

        const panel = this.panels['model-library'];
        
        if (!panel) {
            console.error('❌ 模型库面板不存在！');
            return;
        }

        // 首次打开时填充列表
        if (!panel.dataset.initialized) {

            // 几何体功能已禁用
            // if (window.populateGeometryList) {
            //     console.log('  → 填充几何体列表');
            //     window.populateGeometryList();
            // } else {
            //     console.warn('  ⚠️ populateGeometryList 不存在');
            // }
            
            if (window.populateModelList) {

                await window.populateModelList();
            } else {
                console.warn('  ⚠️ populateModelList 不存在');
            }
            
            if (window.initDragListeners) {

                window.initDragListeners();
            } else {
                console.warn('  ⚠️ initDragListeners 不存在');
            }
            
            panel.dataset.initialized = 'true';

        } else {

            // 每次打开都刷新模型列表
            if (window.populateModelList) {
                await window.populateModelList();
            }

        }
    }
    
    /**
     * 初始化材质编辑器
     */
    async initializeMaterialEditor() {

        const panel = this.panels['material-editor'];
        
        if (!panel) {
            console.error('❌ 材质编辑器面板不存在！');
            return;
        }

        // 首次打开时初始化
        if (!panel.dataset.initialized) {

            try {
                // 动态导入材质编辑器模块
                const { MaterialEditorPanel } = await import('../scene/MaterialEditorPanel.js');
                
                // 创建材质编辑器实例
                this.materialEditorPanel = new MaterialEditorPanel();
                
                panel.dataset.initialized = 'true';

            } catch (error) {
                console.error('❌ 初始化材质编辑器失败:', error);
            }
        } else {

            // 刷新材质列表
            if (this.materialEditorPanel && this.materialEditorPanel.loadMaterials) {
                await this.materialEditorPanel.loadMaterials();
            }

        }
    }
    
    /**
     * 初始化贴图库
     */
    async initializeTextureLibrary() {

        const panel = this.panels['texture-library'];
        
        if (!panel) {
            console.error('❌ 贴图库面板不存在！');
            return;
        }

        // ⭐ 每次打开面板时都清空搜索框并重置列表
        const searchInput = document.getElementById('texture-library-search-input');
        const clearBtn = document.getElementById('texture-library-search-clear');
        if (searchInput) {
            searchInput.value = '';
        }
        if (clearBtn) {
            clearBtn.style.display = 'none';
        }

        // 首次打开时初始化
        if (!panel.dataset.initialized) {

            try {
                // 动态导入贴图库管理器模块
                const { getTextureLibraryManager } = await import('../model-library/TextureLibraryManager.js');
                
                // 获取当前项目ID
                const projectId = window.currentProjectId;
                if (!projectId) {
                    console.error('❌ 未找到当前项目ID');
                    return;
                }
                
                // 创建贴图库管理器实例
                this.textureLibraryManager = getTextureLibraryManager(projectId);
                
                // 初始化贴图库
                await this.textureLibraryManager.initialize();
                
                panel.dataset.initialized = 'true';

            } catch (error) {
                console.error('❌ 初始化贴图库失败:', error);
            }
        } else {

            // 刷新贴图列表（显示所有贴图，不过滤）
            if (this.textureLibraryManager) {
                await this.textureLibraryManager.loadTextures();
                // 重置过滤状态，显示所有贴图
                this.textureLibraryManager.filterTextures('');
            }

        }
    }
    
    /**
     * 初始化相机面板
     */
    async initializeCameraPanel() {
        const panel = this.panels['camera'];
        if (!panel) {
            console.error('❌ 相机面板不存在！');
            return;
        }

        if (!panel.dataset.initialized) {
            try {
                const { getCameraPanel } = await import('../panels/CameraPanel.js');
                this.cameraPanel = getCameraPanel();
                panel.dataset.initialized = 'true';
            } catch (error) {
                console.error('❌ 初始化相机面板失败:', error);
            }
        }
    }

    /**
     * 当节点被选中时
     */
    async onNodeSelected(node) {

        if (!node || node.id === 'root') {

            // 显示空状态
            const nodeNameEl = document.getElementById('transform-node-name');
            const controlsArea = document.getElementById('transform-controls-area');
            
            // 🔒 如果名称输入框正在编辑模式，不要干扰
            if (nodeNameEl && nodeNameEl.readOnly) {
                nodeNameEl.value = '未选中节点'; // 修复：input元素使用value而不是textContent
            }
            if (controlsArea) {
                controlsArea.style.display = 'none';
            }
            return;
        }
        
        // 更新Transform面板内容
        if (this.transformPanel) {
            this.transformPanel.show(node);
        }

        // 如果是相机节点，自动打开相机面板
        if (node.type === 'camera') {
            await this.openPanel('camera');
        }
        
        // 更新相机面板（如果已初始化）
        if (this.cameraPanel) {
            this.cameraPanel.setNode(node);
        }
        
        // 更新节点名称
        const nodeNameEl = document.getElementById('transform-node-name');
        if (nodeNameEl) {
            nodeNameEl.value = node.name; // 修复：input元素使用value而不是textContent
        }
        
        // 显示控件区域
        const controlsArea = document.getElementById('transform-controls-area');
        if (controlsArea) {
            controlsArea.style.display = 'block';
        }
        
        // 🔧 已禁用：不再自动打开Transform面板（如果未打开）
        // 用户可以手动点击Tab切换到属性面板
        /*
        if (this.currentActivePanel !== 'transform') {

            // 先关闭其他面板
            if (this.currentActivePanel) {
                const closed = await this.closePanel(this.currentActivePanel);
                if (!closed) {

                    return;
                }
            }
            // 直接打开Transform面板，不使用toggle
            await this.openPanel('transform');
        }
        */
    }
    
    /**
     * 当节点被取消选中时
     */
    async onNodeDeselected() {
        const nodeNameEl = document.getElementById('transform-node-name');
        
        // 🔒 如果名称输入框正在编辑模式，不要干扰（等待用户完成编辑）
        if (nodeNameEl && !nodeNameEl.readOnly) {
            console.log('⏸️ 名称正在编辑中，延迟取消选中操作');
            return;
        }

        // 更新Transform面板为空状态
        if (this.transformPanel) {
            this.transformPanel.currentNode = null;
        }
        
        // 显示空状态
        if (nodeNameEl) {
            nodeNameEl.value = '未选中节点'; // 修复：input元素使用value而不是textContent
        }
        
        // 隐藏控件区域
        const controlsArea = document.getElementById('transform-controls-area');
        if (controlsArea) {
            controlsArea.style.display = 'none';
        }
        
        // ⭐ 关闭Transform面板（因为没有节点被选中了）
        if (this.currentActivePanel === 'transform') {

            await this.closePanel('transform');
        }

    }
}

// 全局关闭面板函数（供HTML onclick调用）
window.closeRightPanel = async function(panelName) {

    // 获取管理器实例
    const manager = window.rightToolbarManager;
    if (!manager) {
        console.error('❌ 未找到rightToolbarManager');
        return;
    }

    // 调用关闭方法，检查是否允许关闭
    const closed = await manager.closePanel(panelName);
    
    if (!closed) {

        return;
    }
    
    // 确保DOM更新（只在成功关闭时执行）
    const panel = document.getElementById(panelName === 'transform' ? 'transform-panel' : 'model-library-panel-content');
    if (panel) {

        panel.classList.remove('show');
    }

};

// 延迟初始化 - 在DOM加载完成后创建实例
let rightToolbarManager = null;

function initRightToolbarManager() {
    if (!rightToolbarManager) {
        rightToolbarManager = new RightToolbarManager();
        window.rightToolbarManager = rightToolbarManager;

    }
    return rightToolbarManager;
}

// 如果DOM已经加载完成，立即初始化
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initRightToolbarManager);
} else {
    initRightToolbarManager();
}

export default {
    get instance() {
        if (!rightToolbarManager) {
            initRightToolbarManager();
        }
        return rightToolbarManager;
    },
    setTransformPanel(transformPanel) {
        this.instance.setTransformPanel(transformPanel);
    },
    onNodeSelected(node) {
        this.instance.onNodeSelected(node);
    },
    async onNodeDeselected() {
        await this.instance.onNodeDeselected();
    }
};

